import { defineStore } from 'pinia'
import { TAB_VIEW } from '@/enums/cacheEnum'
import { createStorage } from '@/utils/storage'
import router from '@/router'

const Storage = createStorage({ storage: sessionStorage })

// 将tabview存储到缓存内，保存当前tabview
// 展开vue-router实例，只提取 name | fullPath | path | meta | query | title
const setLocatTabViews = (routes = []) => {
  const locatRoutes = routes.map((routeItem) => {
    const { name, fullPath, path, meta, query, title } = routeItem
    return { name, fullPath, path, meta, query, title }
  })
  Storage.set(TAB_VIEW, locatRoutes, null)
}

export const useTabviewStore = defineStore('app-tabview', {
  state: () => ({
    visitedRoutes: Storage.get(TAB_VIEW, [])
  }),
  actions: {
    addVisitedRoute(route) {
      // 获取的路由信息
      // 需要处理highlight
      const allRoutes = router.getRoutes()
      let target = this.visitedRoutes.find(
        (item) => item.path === (route.meta && route.meta.highlight) || item.path === route.path
      )

      if (target) {
        if ((route.meta && route.meta.highlight) !== target.fullPath && route.fullPath !== target.fullPath) {
          Object.assign(target, route)
        }
        return
      }

      let routes = route
      // 如果highlight存在，则查找高亮的路由数据
      if (route.meta && route.meta.highlight) {
        const fRouters =
          allRoutes.filter((f) => f.path === route.meta.highlight || f.path === `${route.meta.highlight}/`) ||
          []
        routes = fRouters.find((f) => f.name) || route
        routes.path = route.meta.highlight
        routes.fullPath = route.meta.highlight
      }

      this.visitedRoutes.push(Object.assign({}, routes))
      // 保存tabview缓存
      setLocatTabViews(this.visitedRoutes)
    },

    /**
     * 关闭当前
     */
    async delVisitedRoute(route) {
      this.visitedRoutes.forEach((item, index) => {
        item.path === route.path && this.visitedRoutes.splice(index, 1)
      })
      // 保存tabview缓存
      await setLocatTabViews(this.visitedRoutes)
    },

    /**
     * 关闭其他
     */
    delOthersVisitedRoute(route) {
      this.visitedRoutes = this.visitedRoutes.filter((item) => item.meta?.affix || item.path === route.path)
      // 保存tabview缓存
      setLocatTabViews(this.visitedRoutes)
    },

    /**
     * 关闭左侧
     */
    delLeftVisitedRoute(route) {
      let index = this.visitedRoutes.length
      this.visitedRoutes = this.visitedRoutes.filter((item) => {
        item.name === route.name && (index = this.visitedRoutes.indexOf(item))
        return item.meta?.affix || index <= this.visitedRoutes.indexOf(item)
      })
      // 保存tabview缓存
      setLocatTabViews(this.visitedRoutes)
    },

    /**
     * 关闭右侧
     */
    delRightVisitedRoute(route) {
      let index = this.visitedRoutes.length
      this.visitedRoutes = this.visitedRoutes.filter((item) => {
        item.name === route.name && (index = this.visitedRoutes.indexOf(item))
        return item.meta?.affix || index >= this.visitedRoutes.indexOf(item)
      })
      // 保存tabview缓存
      setLocatTabViews(this.visitedRoutes)
    },

    /**
     * 关闭全部
     */
    delAllVisitedRoutes() {
      this.visitedRoutes = this.visitedRoutes.filter((item) => item.meta?.affix)
      // 保存tabview缓存
      setLocatTabViews(this.visitedRoutes)
    },

    /**
     * 更新tab路由
     */
    updateVisitedRoute(route) {
      this.visitedRoutes.forEach((item) => {
        item.path === route.path && (item = Object.assign(item, route))
      })
      // 保存tabview缓存
      setLocatTabViews(this.visitedRoutes)
    }
  }
})
